<!--
 * @Author: wellington wellington@kreditme.id
 * @Date: 2023-07-04 14:22:45
 * @LastEditors: wellington wellington@kreditme.id
 * @LastEditTime: 2023-11-10 16:19:53
 * @FilePath: /background-removal/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { DefineComponent } from 'vue';
import BGRemoval from './views/BGRemoval.vue';
import XScroll from './views/Scroll.vue';
import RequestAnimationFrame from './views/RequestAnimationFrame.vue';
import textArea from './views/textArea.vue';
import jsDemo from './views/jsDemo.vue';
import cssDemo from './views/cssDemo.vue';
const current = shallowRef(BGRemoval)
const obj = {
  'BGRemoval': BGRemoval,
  'XScroll': XScroll,
  'RequestAnimationFrame': RequestAnimationFrame,
  'textArea': textArea,
  'jsDemo': jsDemo,
  'cssDemo': cssDemo
}

const handleClick = (value: DefineComponent<{}, {}, any>) => {
  current.value = value
}
</script>

<template>
    <span class="button" v-for="(value, key) in obj" @click="handleClick(value)">{{ key }}</span>
    <component :is="current" />
</template>

<style scoped>
.button {
  margin-right: 10px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid blue;
  display: inline-block;
}
</style>
